import { useEffect, useState } from "react";
import { ArticleModelState, IRouteComponentProps, useDispatch, useSelector } from "umi";
import styles from './index.less'
import './index.less'
import styless from '@/utils/markdown/index.less'
import classNames from "classnames";
import ImageViewer from '@/components/ImageViewer'
import HighLight from '@/components/HighLight'
import StickyCardRead from '@/components/stickyCardRead'
import { Anchor } from 'antd';
import ArtCommend from '@/components/ArtCommend'
import { CommentOutlined, HeartOutlined, ShareAltOutlined } from "@ant-design/icons";
import Popup from '@/components/Popup'
import { BackTop } from "@react-vant/icons";
const ArticleDetail: React.FC<IRouteComponentProps<{ id: string }>> = ({ match }) => {
  const id = match.params.id;
  // 通过useSelector获取model数据
  const { articleDetail } = useSelector((state: { article: ArticleModelState }) => state.article);
  // 通过useDispatch获取dispatch
  const dispatch = useDispatch();
  console.log(articleDetail);

  const { Link } = Anchor;

  const handleAnchorClick = (e: { preventDefault: () => void; }, link: any) => {
    e.preventDefault();
  };

  useEffect(() => {
    dispatch({
      type: 'article/getArticleDetail',
      payload: id
    })
  }, []);


  // 时间
  function newtime(time: string) {
    let times = time?.substring(0, 10)
    let times1 = time?.substring(11, 19)
    return times + " " + times1
  }
  let floor = JSON.parse(localStorage.getItem('Floor') as string) || []

  console.log(floor);

  return <div className={classNames(styles.details)}>
    {/* totalAmount */}
    {
      articleDetail.totalAmount ? <div className={styles.payment}>
        <div>
          <div className={styles.headerPayment}>
            <span>确认以下收费信息</span>
            <span onClick={() => {
              history.go(-1)
            }}>x</span>
          </div>
          <div className={styles.mainPayment}>
            支付 金额：￥{articleDetail.totalAmount}
          </div>
          <div className={styles.footerPayment}>
            <button onClick={() => {
              history.go(-1)
            }}>取消</button>
            <button onClick={() => {
              console.log(123);
              dispatch({
                type: 'article/getAlipay',
                payload: {
                  id: id,
                  totalAmount: articleDetail.totalAmount
                }
              })
            }}>立即支付</button>
          </div>
        </div>
      </div> : null
    }
    <div className={styles.main}>
      <div className={styles.articles}>
        <div className={styles.left}>
          <div className={styles.Share}>
            <div><HeartOutlined /></div>
            <div><CommentOutlined /></div>
            {/* <Popup ProputItem={articleDetail}></Popup> */}
            <div><ShareAltOutlined /></div>
          </div>
          <ImageViewer>
            <HighLight>
              <img src={articleDetail.cover} alt="" />
              <div className={styles.detailsNav}>
                <h1>{articleDetail.title}</h1>
                <p><span>发布于{newtime(articleDetail.publishAt as string)}</span><span className={styles.dian}> · </span><span>阅读量 {articleDetail.views}</span> </p>
              </div>
              <div className={styless.markdown} dangerouslySetInnerHTML={{ __html: articleDetail.html! }}></div>
              <div className={styles.Publish}>
                <div>
                  <span>发布于{newtime(articleDetail.publishAt as string)}</span> <span>版权信息: 非商用-署名-自由转载</span>
                </div>
              </div>
            </HighLight>
          </ImageViewer>
        </div>
        <div className={styles.right}>
          <div className={styles.titles}>
            <div className={styles.recommend}>
              {/* 推荐阅读 */}
              <StickyCardRead></StickyCardRead>
            </div>
            <div className={styles.tag}>
              <header className={styles.Directory}>目录</header>
              <main className={styles.textmain}>
                <div className={styles.scrollbar} >
                  <div className={styles.scrollbar2}>
                    {/* 楼层 */}
                    <Anchor onClick={handleAnchorClick} offsetTop={10} affix={false} style={{ height: "auto" }}>
                      {
                        floor.map((item: any) => {
                          return <div key={item.id}>
                            <div>
                              <Link className={classNames(`h${item.level}`, styles.FloorBright)} href={`#${item.id}`} title={item.text}></Link >
                            </div>
                          </div>
                        })
                      }
                    </Anchor>
                  </div>
                </div>
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div className={styles.backtop} onClick={() => {
      document.body.scrollIntoView({ "behavior": "smooth" })//返回顶部
    }}>
      <BackTop>
      </BackTop>
    </div>
  </div>
}

export default ArticleDetail;